import React, { Component } from 'react';
import { RefreshControl, ListView } from 'antd-mobile';
import * as _ from 'lodash';
import styles from './relationUnit.less';
import { getActualSize } from '../../../../utils/httputil';

export default class RelationUnit extends Component {
  constructor(props) {
    super(props);

    const { page = 1, limit = 10, list } = this.props;
    const height = document.documentElement.clientHeight;
    const top = getActualSize(1.5);
    const style = {
      height: height - top,
      margin: '0.1rem 0',
      overflow: 'auto',
    };
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource,
      refreshing: true,
      isLoading: true,
      style,
      page,
      limit,
      list,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      isLoading: false,
      dataSource: this.state.dataSource.cloneWithRows(nextProps.list),
    });
    setTimeout(() => {
      this.setState({
        refreshing: false,
      });
    });
  }

  onRowClick = ( rowData, rowID, e) => {
    if (_.isFunction(this.props.onRowClick)) {
      this.props.onRowClick(rowData, rowID, e);
    }
  }

  onRefresh = () => {
    console.log('刷新事件');
    this.setState({
      refreshing: true,
    });
    const { limit } = this.state;
    const page = 1;
    this.setState({
      page,
    });
    this.props.onRefresh({
      page,
      limit,
    });
  }

  onEndReached = () => {
    console.log('加载事件');
    let { page } = this.state;
    const { limit } = this.state;
    page += 1;
    this.setState({
      page,
    });
    this.props.onEndReached({
      page,
      limit,
    });
  }

  renderRow = (rowData, sectionID, rowID) => {
    const {
      banner,
      name,
      identity,
      out_type_name: source,
      apply_time_string: date,
      origin_org_name: from,
      goal_org_name: to
    } = rowData;

    const identityText = _.compact([
      identity,
      source,
    ]).join(' | ');

    return (
      <div
        key={rowID}
        className={styles.row}
        onClick={(e) => { this.onRowClick(rowData, rowID, e); }}
      >
        <div className={styles.banner}>
          <img src={banner} alt={name} />
        </div>
        <div className={styles.info}>
          <div className={styles.name}>{name}</div>
          <div className={styles.describe}>
            <div className={styles.identity}>
              {identityText}
            </div>
            <div className={styles.date}>
              {date}
            </div>
          </div>
          <div className={styles.relation}>
            <div className={styles.label}>由</div>
            <div className={styles.value}>
              {from}
            </div>
          </div>
          <div className={styles.relation}>
            <div className={styles.label}>转至</div>
            <div className={styles.value}>
              {to}
            </div>
          </div>
        </div>
      </div>
    );
  }

  renderSeparator = (sectionID, rowID) => (
    <div key={`${sectionID}-${rowID}`} className={styles.separator} />
  )

  renderFooter = () => (
    <div className={styles.footer}>
      {this.state.isLoading ? '加载中...' : '加载完成'}
    </div>
  )

  render() {
    const { style, dataSource, limit } = this.state;
    const refreshControl = (
      <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this.onRefresh}
      />
    );
    const ref = "lv";
    return (
      <ListView
        ref={ref}
        style={style}
        dataSource={dataSource}
        renderFooter={this.renderFooter}
        renderRow={this.renderRow}
        renderSeparator={this.renderSeparator}
        refreshControl={refreshControl}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={100}
        pageSize={limit}
      />
    );
  }
}
